import { cookie } from "./tool.js";
class Login{
    constructor(){
        // 先获取表单DOM对象并储存为属性
        this.user = $(".user");
        this.pass = $(".pass");
        this.captcha = $(".captcha");
        // 获取提交按钮
        this.btn = $(".login form input[type='button']");
        // 获取提示文本框
        this.errTxt = $(".errTxt")
        // 获取协议a标签
        this.radio = $(".radio");
        // 获取手动刷新验证码的按钮i标签
        this.raed = $(".login p .glyphicon");

    }
    init(){
        this.vaildator();
    }
    vaildator(){
        // 获取this指向并储存，防止this指向改变带来的影响
        let _this = this;

        // 禁止所有的输入框键入空白字符-并将其键入的空白字符转成空
        $(".login form p input").each((index,dom)=>{
            $(dom).on("input",function(){
                $(this).val($(this).val().replace(/\s/,""))
            })
        })

        _this.user.on("blur",function(){
            if($(this).val()!==""){
                // _this.errTxt.html("");
                _this.user.falg=true;

            }else{
                _this.user.falg=false;
            }
        })
        _this.pass.on("blur",function(){
            if($(this).val()!==""){
                _this.pass.falg=true;
            }else{
                _this.pass.falg=false;
            }
        })
        _this.captcha.on("blur",function(){
            if($(this).val()!==""){
                _this.captcha.falg=true;
            }else{
                _this.captcha.falg=false;
            }
        })

        _this.btn.on("click",function(){
            // 将所有标记储存为对象
            let arr = [!!_this.user.falg,!!_this.pass.falg,!!_this.captcha.falg,!!_this.radio.falg]
            // 错误信息集合
            let errText = ["用户名输入有误，请检查后重新提交！！！","密码输入有误，请检查后重新提交！！！","验证码输入错误，请重新输入！！！","请阅读并勾选用户协议！！！"]
            // 当所有标记为true时点击登录通过ajax进行匹配
            if(arr.every((value)=>{return value;})){
                _this.errTxt.html("")
                $.ajax({    
                    method:"post",
                    url:"http://localhost:3000/list/login",
                    data:{
                        username: _this.user.val(),//用户名
                        password: _this.pass.val(),//密码
                        captcha:  _this.captcha.val()//验证码
                    },
                    dataType:"json"
                }).then((data)=>{
                    switch(data.status){
                        case 401://用户名不存在
                            console.log(data)
                            _this.errTxt.html(data.meg);
                            _this.errTxt.css("color","red");
                            _this.captcha.val("");
                            $(".login form p img").prop("src",`http://localhost/Samsung/backend/image_captcha.php#${new Date().getTime}`);
                            _this.pass.val(""); 
                            _this.pass.falg=false;
                            break;

                        case 402://用户名密码错误
                            console.log(data)
                            _this.errTxt.html(data.meg);
                            _this.errTxt.css("color","red"); 
                            _this.captcha.val("");
                            $(".login form p img").prop("src",`http://localhost/Samsung/backend/image_captcha.php#${new Date().getTime}`);
                            _this.pass.val(""); 
                            _this.pass.falg=false;
                            break;

                        case 403://验证码错误
                            // console.log(data)
                            _this.errTxt.html(data.msg);
                            _this.errTxt.css("color","red"); 
                            _this.captcha.val("");
                            $(".login form p img").prop("src",`http://localhost/Samsung/backend/image_captcha.php#${new Date().getTime}`);  
                            _this.pass.falg=false;
                            break;

                        case 200: //成功
                            _this.pass.val("")
                            _this.captcha.val("");
                            _this.radio.falg = false;
                            check();
                            cookie.set("cookieUsername",JSON.stringify({"usernam":data.username}),10)
                            location.href="http://localhost:3000/index.html"; 
                            break;
                    }
                })
            }else{
                _this.errTxt.html(errText[arr.indexOf(false)]);
                _this.errTxt.css("color","red")
                if(!_this.captcha.val()===""&&!_this.captcha.falg){
                    _this.captcha.val("");
                    $(".login form p img").prop("src",`http://localhost/Samsung/backend/image_captcha.php#${new Date().getTime}`)

                }
            }
        })

        // 协议按钮点击改变样式，同时将falg属性值改成true
        _this.radio.on("click",function(){
            _this.radio.falg = true;
            check();
        })
        // 因为防止回退时密码和协议按钮还在所以将其作为判断函数
        function check(){
            if(_this.radio.falg){
                 _this.radio.css({
                    "background":"radial-gradient(circle, #228aff 40% ,white 50%)",
                    "border-color":"#228aff"
                });
            }else{
                _this.radio.css({
                    "background":"white",
                    "border-color":"#ccc"
                });
            }
        }

        $(".login form p img").on("click",function(){
            $(".login form p img").prop("src",`http://localhost/Samsung/backend/image_captcha.php#${new Date().getTime}`)
        })

    }

}

export{
    Login
}